<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
	<title>万医</title>
	<link rel="stylesheet" href="../css/activation.css">
	<script type="text/javascript">
		if(!document.cookie.match(/sessionid/))		
    	   window.location.href="./login.html";
	</script>
</head>
<body>	
 <section class="actPage1">
 	<div class="content">
	<div class="blank28"></div>
	<div class="pageHead">
		<em>谁会使用这个盒子？</em>
		<p>请正确选择，确定后无法更改。</p>	
	</div>
	<div class="blank52"></div>
	<div class="choice">
		<div class="self">
			<span  class="backImg personBack">
				<input type="radio" name="person" value="self" id="S">
			</span><label for="S">我</label>	
		</div>
		<div class="blank24"></div>
		<div class="other">
			<span class="backImg personBack">
				<input type="radio" name="person" value="other" id="O">
			</span><label for="O">其他人</label>	
		</div>
	</div>
	<div class="blank46"></div>
	<div class="info">
	</div>
	<a class="submit submitDefault next1" name="#step1">下一步</a>
	<div class="blank34"></div>
</div>
 </section>
 <section class="actPage2 hide">
 	<div class="content">
	<div class="blank28"></div>
	<div class="pageHead">
		<em>填写个人信息</em>
	</div>
	<div class="blank30"></div>
	<div class="name">
		<label for="na">姓名</label>
		<input type="text" id="na">
	</div>
	<div class="sexChoice">
		<span class="sexInfo">性别</span>
		<div class="manChoice">
			<span class="backImg sexBack">
				<input type="radio" name="sex" id="M" value="M">
			</span><label for="M">男</label>
		</div>
		<div class="womenChoice">
			<span class="backImg sexBack">
				<input type="radio" name="sex" id="F" value="F">
			</span><label for="F">女</label>	
		</div>
	</div>
	<div class="validate">
		<label for="birthday">出生日期</label>
		<span class="validateCode">	
			<input type="date" id="birthday" required min="1900-01-01" max="2015-09-23" value="1900-01-01">
		</span>
	</div>
	<div class="blank52"></div>
	<div class="info">
	</div>
	<a class="submit submitDefault next2" name="#step2">下一步</a>
	<div class="blank34"></div>
</div>
 </section>
 <section class="actPage3 hide">
 	<div class="content">
	<div class="blank28"></div>
	<div class="pageHead">
		<em>填写激活码</em>
		<p>激活码是采样盒封面右上角的14位数字</p>	
	</div>
	<div class="blank52"></div>
	<div class="validate">
		<span class="validateCode">
			<label for="actCode">激活码</label>
			<input type="text" id="actCode" maxlength="17">
		</span>
	</div>
	<div class="blank10"></div>
	<div class="info">
	</div>
	<div class="blank18"></div>
	<a class="submit submitDefault next3" name="#step3">下一步</a>
	<div class="blank34"></div>
</div>
 </section>
 <section class="actPage4 hide">
 	<div class="blank28"></div>
<div class="pageHead pageSpace">
	<em>选择<i>5</i>类你关心的健康风险</em>
	<p>如果你有某种疾病的家族史，或者有亲朋好友得过
	某种病，你可能会关心自己得此病的风险。</p>	
</div>
<div class="blank18"></div>
<ul class="navi" id="tem1">
	
</ul>

<div class="blank18"></div>
<div class="content">
	<a class="submit submitDefault next4" name="#step4">下一步</a>
</div>
<div class="blank34"></div>

 </section>
 <section class="actPage5 hide">
 	<div class="blank28"></div>
<div class="pageHead pageSpace">
	<em>排序</em>
	<p>按照你关心的程度，将疾病项目进行<i>拖动排序</i>，最关心的排在最前面，你的报告将会依照这个顺序排列。</p>	
</div>
<div class="blank18"></div>
<div class="dragShow">
	<i class="sortIcon sortFirst"></i>
	<i class="sortIcon sortSecond"></i>
	<i class="sortIcon sortThird"></i>
	<i class="sortIcon sortFourth"></i>
	<i class="sortIcon sortFifth"></i>
	<ul class="navi">
		<li class="navItem page5NavItem" id="dragItem1">
			<div class="itemDetail">			
			</div>
		</li>
		<li class="navItem page5NavItem" id="dragItem2">			
			<div class="itemDetail" >			
			</div>
		</li>
		<li class="navItem page5NavItem" id="dragItem3">
			<div class="itemDetail" >
			</div>
		</li>
		<li class="navItem page5NavItem" id="dragItem4">			
			<div class="itemDetail" >
			</div>
		</li>
		<li class="navItem page5NavItem" id="dragItem5">			
			<div class="itemDetail">
			</div>
		</li>
	</ul>
</div>
<div class="blank18"></div>
<div class="content">
	<a class="submit next5" name="#step5">下一步</a>
</div>
<div class="blank34"></div>


 </section>
 <section class="actPage6 hide">
 	<div class="blank28"></div>
<div class="pageHead content">
	<em><i></i>的报告包含的项目：</em>	
</div>
<div class="blank33"></div>
<div class="pageCenter content">
	<em>健康风险</em>
	<p>你上一步选择并排序的项目。</p>	
</div>
<div class="blank31"></div>
<div class="choiceDetail1 content">
</div>	
<div class="blank55"></div>
<div class="pageCenter content">
	<em>性状与指标</em>
	<p>这些项目不属于健康风险，但你可以更了解自己的身体。</p>	
</div>
<div class="blank31"></div>
<div class="choiceDetail2 content">
</div>
<div class="blank55"></div>
<div class="pageCenter content">
	<em>运动与营养</em>
</div>
<div class="blank20"></div>
<div class="choiceDetail3 content">
</div>	
<div class="blank48"></div>	
<div class="content buttonContent">
	<a class="submit next6" name="#step6">确定</a>
</div>
<div class="blank34"></div>

 </section>
 <section class="actPage7 hide">
 	<div class="blank28"></div>
<div class="pageHead content">
	<em>知情同意</em>
	<p>选择的这5类，按照你关心的程度由高到低排列，
我们会按照这个顺序提供报告。</p>	
</div>
<div class="blank14"></div>
<div class="agreeBook">
	<em>万人基因组关联分析研究100种人类复杂性状<br>知情同意书</em>
	<p class="needIndent">您将被邀请参加一项 “万人基因组关联分析研究100种人类复杂性状”的研究。主要是通过对个人临床信息的收集结合基因组层面的分析，以此对个人的健康生活提供意见和建议以及提供更为准确的多种疾病早期预警。此项目由杭州多知科技有限公司主持。本知情同意书提供给您一些信息以帮助您决定是否参加此项研究。本项研究已通过本公司伦理审查委员会审查。如您同意加入此项研究，请下列说明。如您有任何疑问，请向负责该研究的研究者提出。</p>
	<p>1.工作人员将会向您做调查问卷，请您填写个人和家族疾病史、用药史、相关检查数据等。同时，将会取得您的口腔上皮组织，提取DNA进行基因分型等分子遗传学相关研究。该过程不会给您带来任何风险和不适。</p>
	<p>2.您的资料记录将保存在公司，研究者、研究主管部门、伦理委员会将被允许查阅。任何有关本研究的结果公开将不会披露您的个人信息。我们将在法律允许的范围内，尽一切努力保护您的资料隐私。</p>

</div>
<div class="content">
	<a class="submit next7" name="#step7">我接受</a>
</div>
<div class="blank34"></div>

 </section>
 <section class="actPage8 hide">
 	<div class="content">
	<div class="blank60"></div>
	<div class="seccessOrNo">
		<i></i>		
	</div>
	<div class="blank18"></div>
	<div>
		<em class="actName"></em>
		<p>激活码<i class="aCode"></i></p>
	</div>
	<div class="blank45"></div>
	<div class="showMore">
		<em class="actSeccess"></em>
		<p></p>
	</div>
	<div class="blank70"></div>
	<div>
		<a class="linkMore" href="./activation.html" name="#step8">激活更多</a>
	</div>
	<div class="blank32"></div>
	<div>
		<a class="linkMore" href="javascript:">采样说明</a>
	</div>
	<div class="blank34"></div>
</div>
 </section>
 <script type="text/template" id="template1">
	<%_.each(_.keys(itemList),function(item){
		if(item.toString()=="性状"||item.toString()=="运动"||item.toString()=="营养"||item.toString()=="指标") return true;%>
	<li class="navItem page4NavItem">
		<span class="itemCheck">
			<input type="checkbox" class="itemBox">
		</span>
		<div class="itemDetail">
			<a class="navigation1 page4Nav">
				<em class="catalog"><%=item%></em>
				<span class="rightShow">
					<i><%=_.keys(itemList[item]).length%>项</i>
					<i class="navAnimate"></i>
				</span>
			</a>
			<ul class='secondNav'>
				<%_.each(itemList[item], function(detail){%>
				<li class='navItem2'><i class="itemIcon"></i><%=detail%></li>
				<%});%>					
			</ul>
		</div>
	</li>
	<%});%>
	</script>
	<script type="text/template" id="template2">
			<a class="navigation1">
				<em><%=itemF%></em>
				<span class="rightShow">
					<i><%=_.keys(itemList[itemF]).length%>项</i>
					<i class="navDefault"></i>
				</span>
			</a>
			<ul class='secondNav'>	
				<%_.each(itemList[itemF], function(detail){%>
				<li class='navItem2'><i class="itemIcon"></i><%=detail%></li>
				<%});%>				
			</ul>
	</script>
	<script type="text/template" id="template3">
	<% var index=1;
	_.each(arrSorts,function(item){%>
	 <dl class="choiceItem cf">
	 	<dt><%=index++%>.<i><%=item%></i></dt>
	 	<%_.each(itemList[item], function(detail){%>
		<dd><%=detail%></dd>		
		<%});%>	
	 </dl>
	 <%});%>
	</script>
 <script type="text/javascript" src="../lib/_list.js"></script>
 <script type="text/javascript" src="../lib/zepto.js"></script>
 <script type="text/javascript" src="../lib/_underscore.js"></script>
 <script type="text/javascript">
 function appendZero(s){return ("00"+ s).substr((s+"").length);}
 var time=new Date();
 var theDate=time.getFullYear()+'-'+appendZero(time.getMonth() + 1) + "-"+appendZero(time.getDate());
 $('#birthday').attr('max',theDate)
 var tempHtml = _.template($("#template1").html())(itemList);
 	$("#tem1").html(tempHtml);
 var itemF;
 function showDetail(arrCheck){
	for(var i=0;i<5;i++){
		var key=arrCheck[i];
		for(itemF in itemList){
			if(itemF==key){
				var tempHtml = _.template($("#template2").html())(itemList[itemF]);
 				$('.actPage5 .navItem').eq(i).find(".itemDetail").html(tempHtml);
			}
		}		
	}
}
var itemK;
var arrSorts=[];
function showDetail2(arrSort){
	arrSorts=arrSort;
	var tempHtml1 = _.template($("#template3").html())(arrSorts);
	$('.actPage6 .choiceDetail1').html(tempHtml1);
	arrSorts=["性状","指标"];
	var tempHtml2 = _.template($("#template3").html())(arrSorts);
	$('.actPage6 .choiceDetail2').html(tempHtml2);
	arrSorts=["运动","营养"];
	tempHtml3 = _.template($("#template3").html())(arrSorts);
	$('.actPage6 .choiceDetail3').html(tempHtml3);
	$('.choiceDetail1 .choiceItem').eq(0).addClass('noborder');
	$('.choiceDetail2 .choiceItem').eq(0).addClass('noborder');
	$('.choiceDetail3 .choiceItem').eq(0).addClass('noborder');
}
 </script>
 <script src='../lib/_require.js' data-main='../js/activation.js'></script>
</body>
</html>